<template>
  <div class="files">
<div class="top">
<p></p>
<router-link to="/vant">
    <h1>档案</h1>
</router-link>
<img src="@/assets/img/files.png" alt="">
<i class="iconfont icon-youjiantou"></i>
<h2>
    <router-link to="/ceshiFu">练习</router-link>
</h2>

</div>
<div class="bottom">
    <div class="left">
<h3>
    <li>19</li>
    <li>2022/02</li>
    <li class="year">
        <span>|</span>
        <span>丁酉年</span>
        <span>正月  十九</span>
    </li>
</h3>
<h5>
    <li>宜</li>
    <li>心平气和</li>
    <li></li>
</h5>
<h5 class="h52">
    <li class="ji">忌</li>
    <li>愤怒</li>
    <li></li>
</h5>
    </div>
    <div class="right">
        <router-link to="/homeDetails">
            <h4>
            <h6><span>三餐</span>
            <span>幸运水果：柚子</span></h6>
            <img src="@/assets/img/youzi.png" alt="">
        </h4>
        </router-link>
        <h4>
            <h6><span>起居</span>
            <span>睡前梳头</span></h6>
            <img src="@/assets/img/pig.png" alt="">
        </h4>
    </div>
</div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.right{
    float: left;
    width: 60%;
    height: 100%;
}
.right h4{
    height: 50%;
}
.right h4:nth-child(1){
    box-sizing: border-box;
    border-bottom: .01rem solid #999;
}
h4 img{
    float: right;
    width: .6rem;
    height: .6rem;
    margin: .1rem .1rem 0 0;
}
h6{
    float: left;
    width: 1.2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: flex-start;
    margin-left: .2rem;
}
h6 span:nth-child(1){
    color: green;
    font-size: .2rem;
}
h3 li:nth-child(1){
    font-size: .26rem;
    font-weight: 700;
}
h3 li:nth-child(2){
    margin: .1rem 0;
}
h5 li{
    width: .2rem;
    text-align: center;
}
h5{
    height: 1.5rem;
}
h5 li:nth-child(3){
    width: .15rem;
    height: .15rem;
    border: .01rem solid #999;
    border-radius: 50%;
}
h5 li:nth-child(1){
    font-size: .2rem;
    width: .3rem;
    height: .3rem;
    line-height:.3rem ;
    border-radius: 50%;
    background-color: rgb(114, 238, 76);
}
.left h5 .ji{
    background-color: #fff;
    border: .01rem solid #999;
}
p{
    height: .2rem;
    border-left: .03rem solid green;
    margin: .1rem .1rem 0 .15rem;
}
.top{
    height: .4rem;
    line-height: .4rem;
    border-bottom: .01rem solid #999;
}
p,h1,img{
    float: left;
}
h2,i{
    float: right;
}
h2{
    color: green;
}
i{
    margin:0 .15rem 0 .1rem;
}
img{
    width: .25rem;
    height: .25rem;
    padding: .07rem 0 0 .1rem;
    border-radius: 50%;
}
.bottom{
    height: 1.85rem;
}
.left{
    float: left;
    box-sizing: border-box;
    width: 40%;
    height: 100%;
    border-right: .01rem solid #999;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
h3,h5{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.h52{
    justify-content: flex-start;
}
.h52 li:nth-child(2){
    margin: .1rem 0;
}
.year{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.year span{
    width: .2rem;
    text-align: center;
}
.year span:nth-child(1){
    font-size: .3rem;
    font-weight: 700;
    color: #999;
}
.year span:nth-child(2){
    font-size: .18rem;
    font-weight: 700;
}
</style>